<template>
  <el-dialog
    :title="formData.id ? '编辑服务' : '新增服务'"
    v-model="dialogVisible"
    :destroy-on-close="true"
    width="500px"
    @closed="closed"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input
          :disabled="formData.id && !formData.isDeletable"
          v-model="formData.title"
          placeholder="请输入服务标题"
        />
      </el-form-item>
      <el-form-item label="照片数量" prop="photoCount">
        <el-input-number
          v-model="formData.photoCount"
          :min="0"
          :controls="false"
          placeholder="请输入要求上传照片数量"
        />
      </el-form-item>
      <el-form-item label="价格">
        <el-input-number
          v-model="formData.price"
          :min="0"
          :controls="false"
          placeholder="请输入价格"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="formData.isDeletable" class="delete" type="danger" @click="handleDelete"
          >删除</el-button
        >
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { postSku, putSku, deleteSku } from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'

const emit = defineEmits(['submit'])

const dialogVisible = ref(false)
const formRef = ref(null)

const formData = reactive({
  id: undefined,
  title: '',
  photoCount: undefined,
  price: undefined
})

const rules = {
  title: [
    { required: true, message: '请输入服务标题', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  photoCount: [{ required: true, message: '请输入要求上传照片数量', trigger: 'blur' }]
}

const open = (data) => {
  // 如果有传入数据，则更新表单
  if (data) {
    Object.assign(formData, data)
  }

  dialogVisible.value = true
}

const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    try {
      if (!formData.id) {
        await postSku(formData)
      } else {
        await putSku(formData)
      }
      emit('submit')
      dialogVisible.value = false
    } catch (error) {
      ElMessage.error(error.message)
    }
  })
}

const handleDelete = () => {
  ElMessageBox.confirm(`确认删除【${formData.title}】？`, '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      try {
        await deleteSku(formData.id)
        emit('submit')
        dialogVisible.value = false
      } catch (error) {
        ElMessage.error(error.message)
      }
    })
    .catch(() => {})
}

const closed = () => {
  Object.assign(formData, {
    id: undefined,
    title: '',
    photoCount: undefined,
    price: undefined
  })
}
// 暴露方法给父组件
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  .delete {
    margin: 0 auto 0 20px;
  }
}

:deep(.el-input-number) {
  width: 100%;

  .el-input__inner {
    // width: 200px;
    text-align: left !important;
  }
}
</style>
